<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">
                首页</el-breadcrumb-item
            >
            <el-breadcrumb-item :to="{ path: '/page' }">
                权限管理</el-breadcrumb-item
            >
            <el-breadcrumb-item :to="{ path: '/page' }"
                >菜单管理</el-breadcrumb-item
            >
            <el-breadcrumb-item>
                【{{ pageInfo.title }}】菜单授权
            </el-breadcrumb-item>
        </el-breadcrumb>
        <el-tabs type="card">
            <el-page-header @back="goBack" content="菜单授权"> </el-page-header>
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-select v-model="apis_id" placeholder="Select">
                        <el-option
                            v-for="item in apisAll"
                            :key="item.id"
                            :label="item.apis_name"
                            :value="item.id"
                        >
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="6">
                    <el-button type="primary" @click="subAuth">保存</el-button>
                </el-col>
            </el-row>
        </el-tabs>
    </div>
</template>

<script>
import requestApis from '@/request'
export default {
    data () {
        return {
            pageInfo: [],
            apisAll: [],
            apis_id: 0
        }
    },
    created () {
        this.getApisList()
        this.getMenuRow(this.$route.query.id)
    },
    methods: {
        goBack () {
            this.$router.back()
        },
        getMenuRow (id) {
            requestApis.getMenuRow({ id }).then(res => {
                if (res.meta.code === 1) {
                    this.pageInfo = res.data
                } else {
                    this.$message({
                        message: res.meta.msg,
                        type: 'warning'
                    })
                    this.$router.push('/admin')
                }
            }).catch(error => {
                console.log(error)
            })
        },
        subAuth () {
            requestApis.saveMenuPower({ id: this.$route.query.id, apis_list: this.apis_id }).then(res => {
                if (res.meta.code === 1) {
                    this.$message({
                        message: '授权权限成功',
                        type: 'success'
                    })
                    this.$router.back()
                }
            }).catch(error => {
                console.log(error)
            })
        },
        getApisList () {
            requestApis.getApisList().then(res => {
                console.log('获取的权限1', res)
                if (res.meta.code === 1) {
                    this.apisAll = res.data
                    this.getMenuPower(this.$route.query.id)
                } else {
                    this.$message({
                        message: res.meta.msg,
                        type: 'warning'
                    })
                }
            }).catch(error => {
                console.log(error)
            })
        },
        getMenuPower (id) {
            var that = this
            requestApis.getMenuPower({ id }).then(res => {
                if (res.meta.code === 1) {
                    that.apis_id = res.data
                    console.log('获取的权限2', res.data)
                }
            }).catch(error => {
                console.log(error)
            })
        },
        filterMethod (query, item) {
            if (item.label) {
                return item.label.indexOf(query) > -1
            } else {
                return false
            }
        }
    }
}
</script>

<style>
.el-select {
    width: 100%;
}
.el-row {
    margin: 20px;
}
</style>
